<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../libs/mui.min.css" rel="stylesheet" />
		<link href="../../css/main.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/mine-credit.css" />
	</head>

	<body>
		<div class="head">
			<img id="back" src="../../images/all-left.png" alt="">
			<p>我的信用卡</p>
		</div>

		<div class="title">
			<div class="active"><span>未接单</span></div>
			<div><span>已接单</span></div>
			<div><span>审批中</span></div>
			<div><span>已通过</span></div>
			<div><span>未通过</span></div>
		</div>

		<div class="content">
			<div>
			</div>
			<div style="display: none;">
			</div>
			<div style="display: none;">
			</div>
			<div style="display: none;">
			</div>
			<div style="display: none;">
			</div>

			<p class="more" style="margin-top: 0;">点击加载更多</p>
		</div>

		<script src="../../js/jquery-3.1.1.min.js"></script>
		<script src="../../libs/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/url.js"></script>
		<script type="text/javascript">
			$('#back').on('tap', function() {
				mui.back()
			})
			$('.title>div').on('tap', function() {
				$(this).attr('class', 'active');
				$(this).siblings().removeClass('active');
				$('.content>div').eq($(this).index()).css('display', 'block');
				$('.content>div').eq($(this).index()).siblings().css('display', 'none');
				$('.more').text('点击加载更多')
			})
			var page = 1;
			getCredit();

			function getCredit() {
				$.ajax({
					type: "get",
					url: ur + "rest/loanController/request-list?isUser=true&loanCodes=card-native&page=" + page,
					async: true,
					dataType: 'json',
					data: '',
					headers: {
						'X-token': localStorage.token
					},
					success: function(data) {
						var msg = data.data.list;
						var totalPage = Math.ceil(data.data.total / 10)
						if(data.meta.code === 'S002') {
							var arr = [];
							//一次请求将数据分好装进对应数组显示对应状态
							for(var s = 0; s < 5; s++) {
								arr[s] = [];
								for(var j = 0; j < msg.length; j++) {
									if(msg[j].state == s) {
										arr[s].push(msg[j]);
									}
								}
								for(var k = 0; k < arr[s].length; k++) {
									var addItem = "<div class=\"content-f\">\n\t<p class=\"content-f-bank\">" +
										JSON.parse(arr[s][k].params).bank + "</p>\n\t<p class=\"content-f-name\">\n\t\t<span>申请人姓名：" +
										JSON.parse(arr[s][k].params).name + "</span><span>申请的时间：" +
										arr[s][k].updateDate + "</span>\n\t</p>\n</div>";
									$('.content').children().eq(s).append(addItem);
								}
							}
							if(data.data.total > msg.length) {
								$('.more').on('tap', function() {
									if(page < totalPage) {
										page++;
										getCredit()
									} else {
										$('.more').text('您已没有更多信用卡！');
									}
								})
							} else {
								$('.more').text('')
							}
						} else {
							mui.toast(data.meta.message);
						}
					}
				});
			}
		</script>
	</body>

</html>